<template>
    <view class="diy-calc dir-top-nowrap" :style="[boxStyle]">
        <view class="_diy-form-label"
              :style="{ color: data.title_color}"
              v-if="data.list_style != 3"
              :class="{required: data.is_required}">
            {{ data.title }}
        </view>
        <view :style="[inputStyle]" class="dir-left-nowrap cross-center">
            <view class="_diy-form-label left box-grow-0"
                  :style="{ color: data.title_color}"
                  v-if="data.list_style == 3"
                  :class="{required: data.is_required}">
                {{ data.title  | calcTextWidth }}
            </view>
            <view class="p-input box-grow-1" :class="{right: data.list_style == 3}">
                <div class="dir-left-nowrap cross-center" :class="data.list_style == 3 ? 'main-right': 'main-between'"
                     style="width: 100%;height: 100%">
                    <input type="digit"
                           style="height: 100%"
                               v-model="calcError ? '': form.value"
                               disabled
                               :placeholder="calcError ? '按钮计算不合法': ''"
                               :padding-left="0"
                               :color="data.in_color"
                               background-color="inherit"
                               :placeholder-style="`color:#ff4544;font-size: 30rpx`"
                    ></input>
                    <div :style="{color: data.in_color}" style="margin-left: 20rpx;font-size:30rpx">
                        {{ data.unit }}
                    </div>
                </div>
            </view>
        </view>
    </view>
</template>

<script>
import formCalc from './form-calc.js';

export default {
    name: 'diy-calc',
    props: {
        otherForm: Array,
        index: [Number, String],
        value: Object,
    },
    mixins: [formCalc],
    data() {
        return {
            form: {
                value: '',
            },
            data: {},
            aaa: 1,
        }
    },

    created() {
        this.data = this.value;
        this.origin = 'calc'
        this.calcNumber();
    },
    filters: {
        calcTextWidth: function (text) {
            return text ? text.substring(0, 4) : '';
        }
    },
    methods: {
        calcNumber() {
            let v = this.handlerCalcPrice();
            this.form.value = v.toString();
        },
    },
    watch: {
        'otherForm': {immediate: true, handler: "calcNumber"},
        'form.value': {
            immediate: true,
            handler(newValue) {
                this.$emit('updateValue', {
                    index: this.index,
                    value: this.form.value,
                });
            },
            deep: true
        }
    },
    computed: {
        btnStyle() {
            return (type) => {
                let {
                    nosend_btn_color,
                    send_btn_color,
                    nosend_text_color,
                    send_text_color
                } = this.data;
                let style = {
                    fontSize: '24rpx',
                    borderRadius: '6rpx',
                    marginLeft: '24rpx',
                };
                if (type === 'nosend') {
                    Object.assign(style, {
                        background: nosend_btn_color,
                        color: nosend_text_color,
                        padding: '12rpx 30rpx',
                    })
                }
                if (type === 'send') {
                    Object.assign(style, {
                        background: send_btn_color,
                        color: send_text_color,
                        padding: '12rpx 16rpx',
                    })
                }
                return style;
            };
        },
        boxStyle() {
            let {
                bg_color,
                input_padding,
            } = this.data;
            return {
                backgroundColor: bg_color,
                padding: `20rpx ${input_padding}rpx`,
            }
        },
        inputStyle() {
            let {
                border_color,
                input_radius,
                padding_color,
                list_style,
            } = this.data;
            let style = {
                padding: '0 24rpx',
            }
            if (list_style == 1) {
                Object.assign(style, {
                    borderBottomWidth: '1px',
                    borderBottomStyle: 'solid',
                    borderBottomColor: border_color,
                })
            } else {
                Object.assign(style, {
                    border: `1px solid ${border_color}`,
                    borderRadius: `${input_radius}rpx`,
                    background: padding_color,
                })
            }
            return style;
        },
    },
}
</script>

<style scoped lang="scss">
._diy-form-label {
    padding-left: #{20rpx};
    font-size: #{30rpx};
    white-space: nowrap;
    margin-bottom: #{18rpx};
}

._diy-form-label.required:after {
    content: '*';
    margin-left: 6#{rpx};
    color: #FF4544;
}

.diy-calc {
    ._diy-form-label.left {
        padding: 0;
        margin: 0;
        width: 140#{rpx};
    }

    .p-input {
        height: 84#{rpx};
    }

    .p-input.right {
        text-align: right;
    }
}
</style>
